<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Context Menu</title>
    <style>
        /* 自定义右键菜单样式 */
        .custom-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            padding-left: 0;
        }

        .custom-menu li {
            list-style: none;
            padding: 8px 12px;
            cursor: pointer;
        }

        .custom-menu li:hover {
            background-color: #e0e0e0;
        }

        .custom-menu li[divider] {
            /* color: #666; */
            border-top: 1px solid #ccc;
        }
    </style>
</head>

<body>

    <input type="text" placeholder="Right-click me">
    <input type="password" placeholder="Right-click me too">
    <textarea placeholder="Right-click me as well"></textarea>

    <ul class="custom-menu">
        <li id="copy">复制</li>
        <li id="cut">剪切</li>
        <li id="paste">粘贴</li>
        <li id="selectAll" divider>全选</li>
    </ul>

    <script>
        let currentElement;  // 用于存储当前右键点击的文本框或文本区域

        document.addEventListener('contextmenu', function (event) {
            const isTextBox = (event.target.tagName === 'INPUT' &&
                (event.target.type === 'text' || event.target.type === 'password')) ||
                event.target.tagName === 'TEXTAREA';

            const menu = document.querySelector('.custom-menu');

            if (isTextBox) {
                event.preventDefault();  // 禁用默认的右键菜单

                currentElement = event.target;  // 存储当前点击的元素

                menu.style.display = 'block';
                menu.style.left = `${event.pageX}px`;
                menu.style.top = `${event.pageY}px`;
            } else {
                menu.style.display = 'none';
                event.preventDefault();  // 禁用非文本框区域的默认右键菜单
            }
        });

        document.addEventListener('click', function () {
            const menu = document.querySelector('.custom-menu');
            menu.style.display = 'none';
        });

        // 剪切操作
        document.getElementById('cut').addEventListener('click', function () {
            if (currentElement) {
                const selectedText = currentElement.value.substring(currentElement.selectionStart, currentElement.selectionEnd);
                if (selectedText) {
                    navigator.clipboard.writeText(selectedText).then(() => {
                        const start = currentElement.selectionStart;
                        const end = currentElement.selectionEnd;
                        currentElement.value = currentElement.value.slice(0, start) + currentElement.value.slice(end);
                        currentElement.setSelectionRange(start, start);
                    });
                }
            }
        });

        // 复制操作
        document.getElementById('copy').addEventListener('click', function () {
            if (currentElement) {
                const selectedText = currentElement.value.substring(currentElement.selectionStart, currentElement.selectionEnd);
                if (selectedText) {
                    navigator.clipboard.writeText(selectedText);
                }
            }
        });

        // 粘贴操作
        document.getElementById('paste').addEventListener('click', async function () {
            if (currentElement && navigator.clipboard) {
                try {
                    const text = await navigator.clipboard.readText();
                    const start = currentElement.selectionStart;
                    const end = currentElement.selectionEnd;
                    const value = currentElement.value;

                    currentElement.value = value.slice(0, start) + text + value.slice(end);
                    currentElement.setSelectionRange(start + text.length, start + text.length);
                } catch (err) {
                    console.error('Failed to read clipboard contents: ', err);
                }
            } else {
                alert('Clipboard API not supported or permission denied');
            }
        });

        // 全选操作
        document.getElementById('selectAll').addEventListener('click', function () {
            if (currentElement) {
                currentElement.select();
            }
        });        
    </script>

</body>

</html>